<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>order</title>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">

    <div class="layuimini-main">
        <div class="layui-form-item">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-block">
              <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                <button class="layui-btn layui-btn-primary" id="order" onclick="">全部</button>
                <button class="layui-btn layui-btn-primary" id="order0">未付款</button>
                <button class="layui-btn layui-btn-primary" id="order1">已付款，未发货</button>
                <button class="layui-btn layui-btn-primary" id="order2">已发货，未收货</button>
                <button class="layui-btn layui-btn-primary" id="order3">已收货</button>
              </div> 
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-inline">
              <input type="text" name="ordersn" id='ordersn' placeholder="请输入订单编号" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-primary" id="search">搜索</button>
            </div>
          </div>
        <div>
            <table id="order-table" class="layui-table" lay-filter="order-table"></table>
        </div>

    </div>
</div>
<!-- 操作列 -->
<!-- <script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>0 未付款 1已付款 未发货  2 已发货  3已完成
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script> -->
<script type="text/html" id="toolButton">
    <div class="layui-btn-container">
        <div class="layui-btn-group" >
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="consignment" lay-event="consignment">发货</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="refund" lay-event="refund">退款</button>
            <!-- {{#  if(HavePermission('order-update')){ }}
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="update" lay-event="update">修改<i class="layui-icon"></i></button>
            {{#  }  }}
            {{#  if(HavePermission('order-delete')){ }}
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="delete" lay-event="delete">删除<i class="layui-icon"></i></button>
            {{#  }  }} -->
        </div>
    </div>
  </script>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8">
</script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/custorm/init.js"></script>
<script>
    layui.use(['table'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        initTable();
        // 渲染表格
       function renderTable(d){
            layer.load(4);
            table.render({
                elem: '#order-table',
                data: d,
                page: true,
                limit: 15,
                cellMinWidth: 80,
                toolbar: '#toolButton',
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    { field: 'ordersn', title: '订单编号', align: 'center', width: 200 },
                    { field: 'orderprice', title: '订单金额', align: 'center' , width: 100},
                    { field: 'addtime', title: '下单时间', align: 'center', width: 200 },   
                    { field: 'paytime', title: '支付时间', align: 'center' , width: 200},   
                    {  field: 'orderstatus', width: 200, align: 'center', templet: function (d) {
                        if (d.orderstatus==0) {
                            return '<span >未付款</span>';
                        }
                        else if (d.orderstatus==1) {
                            return '<span >已付款，未发货</span>';
                        }
                        else if (d.orderstatus==2) {
                            return '<span >已发货，未收货</span>';
                        }
                        else if (d.orderstatus==3) {
                            return '<span >已收货</span>';
                        }
            
                    }, title: '订单状态' },  
                    { field: 'consigneeinformation', title: '收货人信息', align: 'center',width:420 },
                    { field: 'expresssn', title: '快递单号', align: 'center' },   
                    { field: 'expressname', title: '快递名称', align: 'center' },   

                ]], done: function (res, curr, count) {
                    layer.closeAll('loading');
                }
            });
        }
      function initTable(){
        AxajGet('../api/shop/GetOrderGroupCount','../../login.html',initOrderStatus);
        AxajGet('../api/shop/GetAllOrder','../../login.html',renderTable);
      }
      $(document).on('click','#order',function(){
            AxajPost('../api/shop/GetOrderByStatus?status='+-1,null,null,'../../login.html',renderTable);
        });
        $(document).on('click','#order0',function(){
            AxajPost('../api/shop/GetOrderByStatus?status='+0,null,null,'../../login.html',renderTable);
        });
        $(document).on('click','#order1',function(){
            AxajPost('../api/shop/GetOrderByStatus?status='+1,null,null,'../../login.html',renderTable);
        });
        $(document).on('click','#order2',function(){
            AxajPost('../api/shop/GetOrderByStatus?status='+2,null,null,'../../login.html',renderTable);
        });
        $(document).on('click','#order3',function(){
            AxajPost('../api/shop/GetOrderByStatus?status='+3,null,null,'../../login.html',renderTable);
        });
        $(document).on('click','#search',function(){
            AxajPost('../api/shop/GetOrderBySn?no='+$('#ordersn').val(),null,null,'../../login.html',renderTable);
        });
      function initOrderStatus(data){
          var num=0;
          if(data['0']==undefined){
            $('#order0')[0].innerHTML='未付款(0)';
          }else{
            $('#order0')[0].innerHTML='未付款('+data['0']+')';
            num+=data['0'];
          }

          if(data['1']==undefined){
            $('#order1')[0].innerHTML='已付款，未发货(0)';
          }else{
            $('#order1')[0].innerHTML='已付款，未发货('+data['1']+')';
            num+=data['1'];
          }   

          if(data['2']==undefined){
            $('#order2')[0].innerHTML='已发货，未收货(0)';
          }else{
            $('#order2')[0].innerHTML='已发货，未收货('+data['2']+')';
            num+=data['2'];
          }          

          if(data['3']==undefined){
            $('#order3')[0].innerHTML='已收货(0)';
          }else{
            $('#order3')[0].innerHTML='已收货('+data['3']+')';
            num+=data['3'];
          }
          $('#order')[0].innerHTML='全部('+num+')';//consignment.html
       }
          //头工具栏事件
        table.on('toolbar(order-table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
            case 'consignment':
                var data = checkStatus.data;
                if(data.length!=1){
                    layer.msg("请选择一条数据");
                    return;
                }
                window.location.href="order/consignment.html?id="+data[0].id;;
            break;
            //自定义头工具栏右侧图标 - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('这是工具栏右侧自定义的一个图标按钮');
            break;
            };
        });

    });
</script>
</body>
</html>